<template>
  <el-form label-width="90px" size="mini">
    <el-form-item label="圆角">
      <el-input-number v-model="attribute.radius" :min="0"/>
    </el-form-item>
    <tm-group label="默认状态">
      <el-form-item label="字体">
        <el-select v-model="attribute.fontFamily">
          <el-option v-for="(item,index) in textFamilyList" :key="index+item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="颜色">
        <el-color-picker v-model="attribute.color" show-alpha/>
      </el-form-item>
      <el-form-item label="加粗" style="width: 100%;">
        <el-radio-group v-model="attribute.fontWeight">
          <el-radio-button label="lighter">更细</el-radio-button>
          <el-radio-button label="normal">正常</el-radio-button>
          <el-radio-button label="bold">加粗</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="背景色">
        <el-color-picker  v-model="attribute.backgroundColor" show-alpha />
      </el-form-item>
      <el-form-item label="背景图片" style="width: 100%;">
        <tm-img-pick  v-model="attribute.backgroundImage" />
      </el-form-item>
    </tm-group>

    <tm-group label="选中状态">
      <el-form-item label="字体">
        <el-select v-model="attribute.active.fontFamily">
          <el-option v-for="(item,index) in textFamilyList" :key="index+item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="颜色">
        <el-color-picker v-model="attribute.active.color" show-alpha/>
      </el-form-item>
      <el-form-item label="加粗" style="width: 100%;">
        <el-radio-group v-model="attribute.active.fontWeight">
          <el-radio-button label="lighter">更细</el-radio-button>
          <el-radio-button label="normal">正常</el-radio-button>
          <el-radio-button label="bold">加粗</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="背景色">
        <el-color-picker  v-model="attribute.active.backgroundColor" show-alpha />
      </el-form-item>
      <el-form-item label="背景图片" style="width: 100%;">
        <tm-img-pick  v-model="attribute.active.backgroundImage" />
      </el-form-item>
    </tm-group>
  </el-form>
</template>

<script>
import {textFamilyList} from "@/package/tools/common";
import tmImgPick from "@/package/components/tm-img-pick";

export default {
  name: 'widget-tab-option',
  cnName: 'widget-tab-option',
  components: {tmImgPick},
  props: {
    attribute: Object
  },
  data() {
    return {
      textFamilyList: textFamilyList,
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.widget-tab-option {
}
</style>
